<template>
  <h3>07-为模板引用标注类型</h3>

  <input type="text" ref="inputRef" />

  <HelloWord ref="compRef" />
  <button @click="loadMore">点击加载更多</button>
</template>

<script setup lang="ts">
import { onMounted, ref, useTemplateRef } from "vue";
import HelloWord from "./HelloWord.vue";

// const inputRef = useTemplateRef("inputRef");

// onMounted(() => {
//   inputRef.value?.focus();
//   console.log(inputRef.value?.value);
// });

const inputRef = ref<HTMLInputElement | null>(null);

onMounted(() => {
  inputRef.value?.focus();
});

type HelloWordType = InstanceType<typeof HelloWord>;
// const compRef = useTemplateRef<HelloWordType>("helloWordRef");
const compRef = ref<HelloWordType | null>(null);
function loadMore() {
  // 执行子组件的方法  getmore
  compRef.value!.getmore();
}

// ref 和 useTemplateRef 的区别：
// 当使用ref获取一个组件或标签的引用时，组件或标签中的ref属性值要跟ref的返回值对齐
// 当使用useTemplateRef获取一个组件或标签的引用时，组件或标签中的ref属性值要跟useTemplateRef的参数对齐
</script>

<style scoped></style>
